<template>
  <el-dialog
    v-model="visible"
    title="修订历史"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="regulation" class="history-content">
      <!-- 法规基本信息 -->
      <div class="regulation-info">
        <h3>{{ regulation.name }}</h3>
        <div class="info-tags">
          <el-tag type="info">{{ regulation.number }}</el-tag>
          <el-tag :type="getStatusTagType(regulation.status)">
            {{ getStatusLabel(regulation.status) }}
          </el-tag>
        </div>
      </div>

      <!-- 修订历史时间线 -->
      <div class="history-timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(revision, index) in revisionHistory"
            :key="revision.id"
            :timestamp="revision.date"
            :type="getTimelineType(index)"
            placement="top"
            size="large"
          >
            <el-card class="revision-card">
              <div class="revision-header">
                <div class="revision-title">
                  <h4>{{ revision.title }}</h4>
                  <el-tag size="small" :type="getRevisionTagType(revision.type)">
                    {{ getRevisionTypeLabel(revision.type) }}
                  </el-tag>
                </div>
                <div class="revision-meta">
                  <span class="revision-author">修订人：{{ revision.author }}</span>
                  <span class="revision-version">版本：{{ revision.version }}</span>
                </div>
              </div>
              
              <div class="revision-content">
                <p class="revision-description">{{ revision.description }}</p>
                
                <!-- 修订详情 -->
                <div v-if="revision.changes && revision.changes.length > 0" class="revision-changes">
                  <h5>主要变更：</h5>
                  <ul>
                    <li v-for="change in revision.changes" :key="change.id" class="change-item">
                      <el-tag size="small" :type="getChangeTagType(change.type)">
                        {{ getChangeTypeLabel(change.type) }}
                      </el-tag>
                      <span class="change-desc">{{ change.description }}</span>
                    </li>
                  </ul>
                </div>

                <!-- 影响范围 -->
                <div v-if="revision.impact" class="revision-impact">
                  <h5>影响范围：</h5>
                  <p>{{ revision.impact }}</p>
                </div>

                <!-- 相关文档 -->
                <div v-if="revision.documents && revision.documents.length > 0" class="revision-documents">
                  <h5>相关文档：</h5>
                  <div class="document-list">
                    <div
                      v-for="doc in revision.documents"
                      :key="doc.id"
                      class="document-item"
                    >
                      <el-icon><Document /></el-icon>
                      <span class="document-name">{{ doc.name }}</span>
                      <el-button type="text" size="small" @click="downloadDocument(doc)">
                        下载
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="revision-actions">
                <el-button size="small" @click="viewRevisionDetail(revision)">
                  查看详情
                </el-button>
                <el-button size="small" type="primary" @click="compareRevision(revision)">
                  版本对比
                </el-button>
                <el-button 
                  v-if="revision.canRevert" 
                  size="small" 
                  type="warning" 
                  @click="revertToRevision(revision)"
                >
                  回滚到此版本
                </el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="exportHistory">导出历史</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// Props
interface Props {
  modelValue: boolean
  regulation?: any
}

const props = withDefaults(defineProps<Props>(), {
  regulation: null
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 模拟修订历史数据
const revisionHistory = ref([
  {
    id: 1,
    title: '第三次修订',
    version: 'v3.0',
    type: 'major',
    description: '完善水资源保护相关条款，增加生态环境保护要求，调整水权管理制度',
    author: '张三',
    date: '2023-12-01 10:30:00',
    impact: '影响全国所有水库管理单位，需要重新制定相关管理制度',
    canRevert: false,
    changes: [
      {
        id: 1,
        type: 'add',
        description: '新增第三章生态环境保护条款'
      },
      {
        id: 2,
        type: 'modify',
        description: '修改第五章水权管理相关内容'
      },
      {
        id: 3,
        type: 'delete',
        description: '删除已过时的临时性管理规定'
      }
    ],
    documents: [
      {
        id: 1,
        name: '修订说明文档.pdf',
        size: '1.2MB'
      },
      {
        id: 2,
        name: '影响评估报告.doc',
        size: '2.8MB'
      }
    ]
  },
  {
    id: 2,
    title: '第二次修订',
    version: 'v2.1',
    type: 'minor',
    description: '调整水权管理制度，优化水资源配置机制，完善监督检查程序',
    author: '李四',
    date: '2022-08-15 14:20:00',
    impact: '主要影响大中型水库，小型水库可继续执行原有规定',
    canRevert: true,
    changes: [
      {
        id: 1,
        type: 'modify',
        description: '优化第四章水资源配置相关条款'
      },
      {
        id: 2,
        type: 'add',
        description: '增加监督检查程序说明'
      }
    ],
    documents: [
      {
        id: 1,
        name: '修订对比表.xlsx',
        size: '856KB'
      }
    ]
  },
  {
    id: 3,
    title: '第一次修订',
    version: 'v2.0',
    type: 'major',
    description: '增加水污染防治相关条款，完善应急管理制度',
    author: '王五',
    date: '2020-03-10 09:15:00',
    impact: '全面影响水库运营管理，需要配套制定实施细则',
    canRevert: true,
    changes: [
      {
        id: 1,
        type: 'add',
        description: '新增第六章水污染防治条款'
      },
      {
        id: 2,
        type: 'modify',
        description: '完善第七章应急管理制度'
      }
    ],
    documents: [
      {
        id: 1,
        name: '实施细则.pdf',
        size: '3.2MB'
      }
    ]
  },
  {
    id: 4,
    title: '初始版本',
    version: 'v1.0',
    type: 'initial',
    description: '法规首次发布，建立水库管理基本制度框架',
    author: '系统',
    date: '2016-07-02 16:00:00',
    impact: '建立全国水库管理统一标准',
    canRevert: false,
    changes: [],
    documents: [
      {
        id: 1,
        name: '原始发布文件.pdf',
        size: '4.5MB'
      }
    ]
  }
])

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const statusMap = {
    'active': 'success',
    'pending': 'warning',
    'expired': 'info',
    'abolished': 'danger'
  }
  return statusMap[status] || ''
}

// 获取状态标签文本
const getStatusLabel = (status: string) => {
  const statusMap = {
    'active': '生效中',
    'pending': '待审核',
    'expired': '已失效',
    'abolished': '已废止'
  }
  return statusMap[status] || status
}

// 获取时间线类型
const getTimelineType = (index: number) => {
  if (index === 0) return 'primary'
  if (index === 1) return 'success'
  return 'info'
}

// 获取修订类型标签类型
const getRevisionTagType = (type: string) => {
  const typeMap = {
    'major': 'danger',
    'minor': 'warning',
    'patch': 'info',
    'initial': 'success'
  }
  return typeMap[type] || ''
}

// 获取修订类型标签文本
const getRevisionTypeLabel = (type: string) => {
  const typeMap = {
    'major': '重大修订',
    'minor': '一般修订',
    'patch': '补丁修订',
    'initial': '初始版本'
  }
  return typeMap[type] || type
}

// 获取变更类型标签类型
const getChangeTagType = (type: string) => {
  const typeMap = {
    'add': 'success',
    'modify': 'warning',
    'delete': 'danger'
  }
  return typeMap[type] || ''
}

// 获取变更类型标签文本
const getChangeTypeLabel = (type: string) => {
  const typeMap = {
    'add': '新增',
    'modify': '修改',
    'delete': '删除'
  }
  return typeMap[type] || type
}

// 查看修订详情
const viewRevisionDetail = (revision: any) => {
  ElMessage.info(`查看修订详情：${revision.title}`)
}

// 版本对比
const compareRevision = (revision: any) => {
  ElMessage.info(`版本对比功能开发中：${revision.title}`)
}

// 回滚到指定版本
const revertToRevision = (revision: any) => {
  ElMessageBox.confirm(
    `确定要回滚到版本 ${revision.version} 吗？此操作将创建一个新的修订版本。`,
    '确认回滚',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success(`已回滚到版本 ${revision.version}`)
  })
}

// 下载文档
const downloadDocument = (doc: any) => {
  ElMessage.info(`下载文档：${doc.name}`)
}

// 导出历史
const exportHistory = () => {
  ElMessage.info('导出修订历史功能开发中...')
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
.history-content {
  max-height: 70vh;
  overflow-y: auto;
}

.regulation-info {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.regulation-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
}

.info-tags {
  display: flex;
  gap: 8px;
}

.history-timeline {
  padding: 0 16px;
}

.revision-card {
  margin-bottom: 16px;
}

.revision-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.revision-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.revision-title h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.revision-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.revision-content {
  margin-bottom: 16px;
}

.revision-description {
  margin: 0 0 16px 0;
  color: #606266;
  line-height: 1.6;
}

.revision-changes,
.revision-impact,
.revision-documents {
  margin-bottom: 16px;
}

.revision-changes h5,
.revision-impact h5,
.revision-documents h5 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.revision-changes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.change-desc {
  color: #606266;
  font-size: 14px;
}

.revision-impact p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.document-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.document-item .el-icon {
  color: #409eff;
  font-size: 16px;
}

.document-name {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

.revision-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 12px;
  font-weight: 500;
}

:deep(.el-timeline-item__node) {
  width: 16px;
  height: 16px;
}

:deep(.el-card__body) {
  padding: 16px;
}
</style>